<template>
  <div>
    <!-- 横向电影 -->
    <div class="top-rated">
      <p class="title">近期最受期待</p>
      <div class="top-rated-list">
        <a
          href="#"
          class="top-rated-item"
          v-for="item in daiying"
          :key="item.id"
        >
          <div class="poster">
            <img :src="item.img" />
            <span class="score">{{ item.wish }}想看</span>
          </div>
          <h5 class="name">{{ item.nm }}</h5>
          <p>{{ item.comingTitle }}</p>
        </a>
      </div>
    </div>
    <div>
      <div class="see" v-for="(item1, key) in daiying1" :key="key">
        <div class="see-div">{{ key }}</div>
        <ul>
          <li v-for="i in item1" :key="i.id">
            <img :src="i.img" />
            <div class="see-text">
              <h3>{{ i.nm }}</h3>
              <div class="see-div1">
                <span>{{ i.wish }}</span>人想看
              </div>
              <div class="see-div2">主演:{{ i.star }}</div>
              <div>{{ i.rt }}上映</div>
            </div>
            <div class="see-s">
              <div class="see-yu" v-if="i.showStateButton" :style="{background:i.showStateButton.color}">
              {{ i.showStateButton.content }}
            </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "daiying",
  data() {
    return {
      daiying: [],
      daiying1: [],
    };
  },
  mounted() {
    //使用axios 获取数据
    axios.get("comming.json").then((res) => {
      res.data.coming.forEach((item) => {
        item.img = item.img.replace("w.h", "128.180"); //64*90
      });
      this.daiying = res.data.coming;
    });
    axios.get("coming.json").then((res) => {
      let daiying1 = res.data.coming;
      var coming = {}; //对象，保存 组装完的数组
      //一维数组转为二维数组
      daiying1.forEach((item) => {
        //修改 图片的w.h 为128*80
        item.img = item.img.replace("w.h", "128.180");
        if (coming[item.comingTitle]) {
          coming[item.comingTitle].push(item);
        } else {
          coming[item.comingTitle] = [];
          coming[item.comingTitle].push(item);
        }
      });
      this.daiying1 = coming;
    });
  },
};
</script>

<style scoped>
.see {
  padding-left: 15px;
}
.see .see-div {
  font-size: 14px;
}
li {
  display: flex;
  margin-top: 12px;
}
li img {
  width: 64px;
  height: 90px;
}
.see-text {
  padding: 0 14px 0 14px;
  width: 60%;
}
.see-text h3 {
  font-size: 16px;
  font-weight: bold;
}
.see-text div span {
  font-size: 16px;
  color: rgb(250, 175, 0);
  font-weight: bold;
}
.see-text h3{
  padding-bottom: 8px;
}
.see-text .see-div1,.see-div2{
  padding-bottom: 5px;
}
.see-s{
  display: flex;
  align-items: center;
}
.see-yu{
  width: 54px;
  line-height: 28px;
  font-size: 14px;
  color: white;
  text-align: center;
  border-radius:20px;
  margin-right: 10px;
}
/* 电影横向渲染样式 */
.top-rated {
  padding: 12px 15px;
  background-color: #fff;
  margin-bottom: 10px;
}
.top-rated-list {
  overflow: scroll;
  white-space: nowrap;
}
.top-rated-list::-webkit-scrollbar {
  display: none;
}
.top-rated .title {
  font-size: 14px;
  color: #333;
  margin: 0 0 12px;
}
.top-rated-item {
  display: inline-block;
  width: 85px;
  overflow: hidden;
  margin-right: 10px;
  text-decoration: none;
}
.top-rated-item .poster {
  width: 85px;
  height: 115px;
  position: relative;
  margin-bottom: 6px;
}
.top-rated-item .poster img {
  height: 100%;
}
.top-rated-item .poster .score,
.top-rated-item .poster .wish {
  position: absolute;
  left: 4px;
  bottom: 2px;
  color: #faaf00;
  font-size: 11px;
  font-weight: 600;
}
.top-rated-item .name {
  font-size: 13px;
  color: #222;
  margin: 0 0 3px;
}
.top-rated-item p {
  font-size: 12px;
  color: #666666;
}
</style>
